<template>
	<div style="width: 100%">
		<Menu></Menu>
		<div class="table-admin-container layout-padding" style="margin-top: 50px; width: 100%; height: calc(100% - 50px)">
			<el-row :gutter="20">
				<el-col :span="4">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">产业链</div>
							</div>
						</template>
						<List @changeChain="changeChain"></List>
					</el-card>
				</el-col>
				<el-col :span="14">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">{{ chain_name_big }}产业链图谱</div>
							</div>
						</template>
						<ChainTp ref="chainTpRef" @changeChild="changeChild"></ChainTp>
					</el-card>
				</el-col>
				<el-col :span="6">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">
									企业 <span v-if="chain_name">({{ chain_name }})</span>
								</div>
								<div class="more"></div>
							</div>
						</template>
						<Company ref="CompanyRef"></Company>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, ref, onMounted } from 'vue';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Company = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/company.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/menu.vue'));
const ChainTp = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/chainTp.vue'));

let CompanyRef = ref();
let chain_name_big = ref();
let chain_name = ref();

let chainTpRef = ref(null);
const changeChain = (data) => {
	if (!data.pid) {
		chain_name_big.value = data.chain_name;
		chainTpRef.value.changeChain(data);
	} 
	chain_name.value = data.chain_name;
	CompanyRef.value.init({ chain_id: data.id });
};
const changeChild = (data) => {
	chain_name.value = data.chain_name;
	CompanyRef.value.init({ chain_id: data.id });
};

// 页面加载时
onMounted(() => {});
</script>

<style scoped lang="scss">
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}

.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}

.cl {
	clear: both;
}
</style>
